<template>
  <div class="container_edit">
    <div class="main">
      <el-form
        :model="user"
        :rules="rules"
        ref="user"
        label-width="150px"
        class=""
      >
        <el-form-item
          label="简介内容："
          prop="productDetail"
        >
          <bg-editor
            :minHeight="300"
            :uploadUrl="upLoadUrl"
            :content="user.productDetail"
            @editorData='editorInfo'
          >
          </bg-editor>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleSave('user')"
          >保存</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
export default {
  data() {
    return {
      upLoadUrl: "",
      user: {
        productDetail:''
      },
      
      rules: {
       
      }
    };
  },
  mounted() {
    let sessionId = sessionStorage.getItem("sessionId");
    this.upLoadUrl =
      CONSTANT.URL.SYSTEM.UPLOADFILEBYCOS + "?sessionId=" + sessionId;
    if (this.id) {
      // this.getInfo();
    }
  },
  components: {
    "bg-editor": () => import("../common/bg-editor.vue")
  },
  methods: {
    getInfo: function() {
      let url = CONSTANT.URL.LIST.FINDPRODUCTBYID;
      common.requestAjax(url, null, { id: this.id }, res => {
        if (res.status == 200) {
          let data = res.data.bussData;
          this.user = {
            category: data.category,
            city: data.city,
            classify: data.classify,
            discountPrice: data.discountPrice,
            distributionMode: data.distributionMode,
            freight: data.freight,
            id: data.id,
            coverFileKey: data.coverFileKey,
            pictureFileKey: data.pictureFileKey,
            productCode: data.productCode,
            productDetail: data.productDetail,
            productName: data.productName,
            productPrice: data.productPrice,
            specifications: data.specifications,
            style: data.style,
            way: data.way
          };
          let arr = data.pictureFileKey.split(",");
          data.pictureUrl.map((item, index) => {
            this.fileShowList.push({
              url: item,
              fileKey: arr[index]
            });
          });
          this.imageUrl = data.coverUrl;
          if (data.distributionMode == "all_support") {
            this.wayArr = ["商家配送", "到店自取"];
          } else {
            this.wayArr =
              data.distributionMode == "merchant" ? ["商家配送"] : ["到店自取"];
          }
        }
      });
    },
    editorInfo(val) {
      this.user.productDetail = val;
    },
    handleSave: function(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let arr = [];
          this.fileShowList.map(item => {
            arr.push(item.fileKey);
          });
          this.user.pictureFileKey = arr.join(",");
          let url = CONSTANT.URL.LIST.SAVEPRODUCT;
          common.requestAjax(url, JSON.stringify(this.user), null, res => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "保存成功！"
              });
              this.$router.replace({
                path: "/goodList",
                query: { pageIndex: this.currentPage }
              });
            } else {
              this.$message({
                type: "warning",
                message: res.msg
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.table-content {
  width: 500px;
  .table-item {
    position: relative;
    border: 1px solid #dcdfe6;
    i {
      position: absolute;
      right: -30px;
      top: 20px;
      cursor: pointer;
      font-size: 16px;
    }
    &:first-child {
      background-color: #409eff;
      color: #fff;
      border-right: 0px solid #dcdfe6;
      .table-list {
        padding: 0;
      }
    }

    .table-list {
      flex: 2;
      text-align: center;
      padding: 5px 0;
      .el-input {
        height: 70% !important;
        width: 90%;
      }
      &:first-child {
        flex: 3;
        border-right: 1px solid #dcdfe6;
      }
    }
  }
}
</style>
